<template>
    <div id="decrepitHouseYB">
      <div class="top">
        <img style="width: 80%; margin: 0 auto" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/13.png" />
        <p>
          <span style="width: 27%; display: inline-block; text-align: center">基本信息</span>
          <span style="width: 45%; display: inline-block; text-align: center">鉴定信息</span>
          <span style="width: 25%; display: inline-block; text-align: center">危改审批</span>
        </p>
      </div>
      <div class="content">
        <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
          <span style="margin-right: 10px;" class="line"></span>
          房屋基本信息
        </p>
        <div class="list">
          <ul>
            <li v-for="(item,index) in JBXXcontentData" :key="index" :style="{borderBottom:index===JBXXcontentData.length-1?'none':'1px solid #D2D2D2'}">
              <span style="margin-right: 20px;font-size: 14px;">{{item.name}}</span>
              <span v-if="item.type" style="float: right;font-size: 14px;">{{rowData[item.value]}}</span>
              <span v-else-if="item.children" style="float: right;font-size: 14px;">{{JBXXrowData[item.value] | inUseName(item.children)}}</span>
              <span v-else style="float: right;font-size: 14px;">{{JBXXrowData[item.value]}}</span>
            </li>
          </ul>
        </div>
        <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
          <span style="margin-right: 10px;" class="line"></span>
          鉴定信息
        </p>
        <div class="list">
          <ul>
            <li v-for="(item,index) in JDXXcontentData" :key="index" :style="{borderBottom:index===JDXXcontentData.length-1?'none':'1px solid #D2D2D2'}">
              <span style="margin-right: 20px;font-size: 14px;">{{item.name}}</span>
              <span v-if="item.children" style="float: right;font-size: 14px;">{{JBXXrowData[item.value] | inUseName(item.children)}}</span>
              <span v-else style="float: right;font-size: 14px;">{{JBXXrowData[item.value]}}</span>
            </li>
          </ul>
        </div>
        <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
          <span style="margin-right: 10px;" class="line"></span>
          附件材料
        </p>
        <div>
          <van-uploader
            :after-read="afterRead"
            :before-delete="delectFile"
            v-model="fileList"
            multiple
            :disabled="!showData"
          />
        </div>
        <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
          <span style="margin-right: 10px;" class="line"></span>
          镇街审批
        </p>
        <div class="inputWrap">
          <span style="color: #ff0000">*</span>
          <van-field
            clickable
            readonly
            :value="formData.IF_TKFK | inUseName(ENUM.ISARR)"
            label="是否腾空"
            placeholder="请选择是否"
            @click="showData?ENUM.IS = true:''"
          />
          <van-popup  v-model="ENUM.IS" position="bottom" get-container="#popup">
            <van-picker show-toolbar :columns="ENUM.ISARR" value-key="DICNAME" @confirm="handleClick" @cancel="ENUM.IS = false" />
          </van-popup>
        </div>
        <div class="inputWrap">
          <span style="color: #ff0000">*</span>
          <van-field
            readonly
            clickable
            name="picker"
            :value="formData.JWFS | inUseName1(ENUM.JWFSARR)"
            label="解危方式"
            placeholder="选择解危方式"
            @click="showData?ENUM.JWFS = true:''"
          />
          <van-popup v-model="ENUM.JWFS" position="bottom"  get-container="#popup">
            <van-picker show-toolbar :columns="ENUM.JWFSARR" value-key="DICNAME" @confirm="onConfirmTown3" @cancel="ENUM.JWFS = false" />
          </van-popup>
        </div>
        <div class="inputWrap">
          <span style="color: #ff0000">*</span>
          <van-field :readonly="!showData" v-model="formData.LXDH" label="解危工作领导小组办公室电话" />
        </div>
        <div class="inputWrap">
          <span style="color: #ff0000">*</span>
          <van-field :readonly="!showData" rows="2" autosize type="textarea" v-model="formData.SPYJ" label="审批意见" />
        </div>
      </div>
      <div class="footer"  v-if="showData">
        <van-button
          style="margin-right: 10px;width: 44vw;"
          size="small"
          type="info"
          @click="TJDara"
        >提交</van-button
        >
        <van-button size="small" style="width: 44vw;" type="info" @click="saveData">保存</van-button>
      </div>
    </div>
</template>

<script>
  import {
    InsertDataView,
    dataServerOpenDataView,
    updateDataView,
    FileServerUpload,
    GetFileData,
    DelectFile,
    FileServerProxy,
    dataTransFilePreview,
    dataTransFile
  } from '../../../utils/api'
  export default {
    name: "decrepitHouseYB",
    filters: {
      inUseName: function (msg, data) {
        let name = ''
        data.forEach(item => {
          if (item.DICID == msg) {
            name = item.DICNAME
          }
        })
        return name
      },
      inUseName1: function (msg, data) {
        let name = ''
        data.forEach(item => {
          if (item.DICID == msg) {
            name = item.DICNAME
          }
        })
        return name
      }
    },
    data(){
      return{
        showData:true,
        fileList:[],
        rowData:{},
        JBXXcontentData:[
          {
            name:'户主姓名',
            value:'SQR'
          },
          {
            name:'身份证号码',
            value:'ZJH'
          },
          {
            name:'手机号',
            value:'SJH'
          },
          {
            name:'是否困难家庭',
            value:'KNLX',
            children:[
              {
                DICID:'6',
                DICNAME:'否'
              },
              {
                DICID:'5',
                DICNAME:'是'
              }
            ]
          },
          {
            name:'所属市',
            value:'F_SCITY_CITYNAME',
            type:'1'
          },
          {
            name:'所属县(区)',
            value:'F_XCITY_CITYNAME',
            type:'1'
          },
          {
            name:'所属镇',
            value:'F_SSZZ_NAEM',
            type:'1'
          },
          {
            name:'所属村',
            value:'F_VILLAGE_NAME',
            type:'1'
          },
          {
            name:'房屋地址',
            value:'FWDZ'
          },
          {
            name:'建筑层数',
            value:'CS'
          },
          {
            name:'建造年份',
            value:'NF'
          },
          {
            name:'鉴定机构',
            value:'JDJG'
          }
        ],
        JDXXcontentData:[
          {
            name:'鉴定类型',
            value:'JDLX',
            children:[]
          },
          {
            name:'鉴定等级',
            value:'JDDJ',
            children:[]
          },
          {
            name:'鉴定时间',
            value:'JDSJ'
          },
          {
            name:'上传人',
            value:'SCR'
          },
          {
            name:'备注',
            value:'BZ'
          }
        ],
        ENUM: {
          ISARR: [],
          IS: false,
          JWFSARR: [],
          JWFS: false,
          JDDJARR: [],
          JDDJ: false
        },
        formData:{
          CS:'',
          NF:'',
          FWDZ:'',
          SCITY:'',
          XCITY:'',
          ZCITY:'',
          CCITY:'',
          JDLX:'',
          JDDJ:'',
          JDSJ:'',
          JDBGBH:'',
          BH:'',
          IF_TKFK:'',
          JWFS:'',
          SPYJ:'',
          LXDH:'',
          SPR:'',
          SPKSSJ:''
        },
        JBXXrowData:{},
        isAdd:true,
      }
    },
    methods: {
      TJDara() {
        this.$router.push({
          path: '/TreeSelectAutoSend',
          query: { data: this.rowData, list: true }
        })
      },
      afterRead(file) {
        this.getFileServerUpload(file.file)
      },
      delectFile: async function(file) {
        let fileguid = ''
        if (file.ROW_GUID) {
          fileguid = file.ROW_GUID
        } else {
          fileguid = this.fileGuid
        }
        if (fileguid) {
          let params = {
            accessCode: 'ce9b691634de4ebca68dc5bb638d07f4',
            cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
            params: {
              fileGuid: fileguid,
              token: window.localStorage.getItem('token')
            }
          }
          const res = await FileServerProxy(params)
          let data = JSON.parse(res.data.data).Success
          if (data) {
            this.$toast.success('删除成功!')
          }
        }
      },
      getFileServerUpload: async function(file) {
        let data = {
          toRowGuid: this.rowData.ROW_GUID,
          groupGuid: "fb4bb94f-df61-4690-81f4-b751c42c92fb",
          // token: window.localStorage.getItem('token')
        }
        let formData = new FormData()
        formData.append('file', file)
        formData.append('accessCode', '7a3fc061c866434b8475d3775c9ddcea')
        formData.append('cityCode', window.localStorage.getItem("citycode")
              ? window.localStorage.getItem("citycode")
              : "441300000000",)
        // formData.append('token', window.localStorage.getItem('token'))
        formData.append('paramStr', JSON.stringify(data))
        const res = await dataTransFile(formData)
        let data1 = JSON.parse(res.data.data).FileList
        this.fileGuid = data1[0].FILEGUID
        if (data1[0].FILEGUID) {
          this.$toast.success('上传成功!')
        }
      },
      handleClick(val) {
        this.formData.IF_TKFK = val.DICID
        this.ENUM.IS = false
      },
      onConfirmTown3(val) {
        this.formData.JWFS = val.DICID
        this.ENUM.JWFS = false
      },
      getEnum: async function(viewID) {
        let params = {
          accessCode: "688bd3883572440a859dfd8ba9194e7b",
             cityCode: window.localStorage.getItem("citycode")
              ? window.localStorage.getItem("citycode")
              : "441300000000",
          params: {
            dataguid: viewID,
            searchObject: JSON.stringify([]),
            token: window.localStorage.getItem("token"),
          },
        };
        const res = await FileServerProxy(params);
        // const res = await dataServerOpenDataView(viewID, [], token)
        switch (viewID) {
          case '86d6eb80-8bcb-49f6-b5c3-462ac1ae585d':
            this.ENUM.ISARR = eval("(" + res.data.data + ")").Data
            break
          case '92f63613-9186-4a84-ba66-d098614e07a6':
            this.ENUM.JWFSARR = eval("(" + res.data.data + ")").Data
            break
          case 'b15c9597-ccb8-435c-b43d-06fe30fc0e08':
            this.JDXXcontentData[0].children = eval("(" + res.data.data + ")").Data
            break
          case 'c7007467-d12c-4b87-948e-aa58b2df2131':
            this.JDXXcontentData[1].children = eval("(" + res.data.data + ")").Data
            break
          default:
            break
        }
      },
      getData: async function() {
        let params = {
          accessCode: "688bd3883572440a859dfd8ba9194e7b",
             cityCode: window.localStorage.getItem("citycode")
              ? window.localStorage.getItem("citycode")
              : "441300000000",
          params: {
            dataguid: "250d4b56-f4ca-4ff8-ae0e-3872688087e6",
            searchObject: JSON.stringify([
              {
                field: 'TO_ROW_GUID',
                value: this.rowData.ROW_GUID,
                link: 'OR',
                operator: '='
              }
            ]),
            token: window.localStorage.getItem("token"),
          },
        };
        const res1 = await FileServerProxy(params);
        let data = eval("(" + res1.data.data + ")").Data
        this.contentData = data
        for (let i in this.formData) {
          this.formData[i] = this.contentData[0][i]
        }
        if (data.length > 0) {
          this.isAdd = false
        } else {
          this.isAdd = true
        }
        //调用存储过程
        let paramsData = {
          procName: 'up_housesecurity',
          dtParams: JSON.stringify([{ I_USERID: "'" + this.rowData.ROW_GUID + "'", I_TYPE: 2 }]),
          token: window.localStorage.getItem("token")
        }
        let paer = {
          "accessCode": "69db6bece3a7480592e2ec753d1e335e",
          "cityCode": window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
          "params": paramsData
        }
        const res = await FileServerProxy(paer);
        this.JBXXrowData = eval("(" + res.data.data + ")").Data[0]
      },
      saveData: async function() {
        for (let i in this.formData) {
          if (this.JBXXrowData[i]) {
            this.formData[i] = this.JBXXrowData[i]
          }
        }
        let data = this.formData
        data.TO_ROW_GUID = this.rowData.ROW_GUID
        if (!this.isAdd) {
          data.PKID = this.contentData[0].PKID
        }
        data.SPR = JSON.parse(window.localStorage.getItem("DanDianName"))
        data.SPKSSJ = this.getDate()
        let params = {
          accessCode: '',
          cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
          params: {
            dataGuid: '250d4b56-f4ca-4ff8-ae0e-3872688087e6',
            strParams: JSON.stringify([data]),
            token: window.localStorage.getItem('token')
          }
        }
        if (this.isAdd) {
          params.accessCode = '0fb3f6123d1b4fe6851c99532c463f6f'
          const res = await FileServerProxy(params)
          let data = JSON.parse(res.data.data).Success
          if (data) {
            this.$toast.success('成功！')
          }
        } else {
          params.accessCode = '77ad6c1591e54d4fbc45ecc90374a2a2'

          const res = await FileServerProxy(params)
          let data = JSON.parse(res.data.data).Success
          if (data) {
            this.$toast.success('修改成功!')
          }
        }
      },
      getFile: async function() {
        let groupGuid = [];
        let params = {
          "accessCode": "1fdcbce42c6d4748a020feba618d54b8",
          "cityCode": window.localStorage.getItem("citycode")
            ? window.localStorage.getItem("citycode")
            : "",
          "params": {
            "groupGuid": "fb4bb94f-df61-4690-81f4-b751c42c92fb",
            "toRowGuid": this.rowData.ROW_GUID,
            token: window.localStorage.getItem('token')
          }
        }
        const res = await FileServerProxy(params)
        let data = JSON.parse(res.data.data).FilesInfo
        if (data.length > 0) {
          data.forEach((element) => {
            // this.ImgData.forEach((items) => {
              if (element.GROUPGUID == "fb4bb94f-df61-4690-81f4-b751c42c92fb") {
                 this.getFileUrl(element);
                // element["isImage"] = true;
                // element["url"] =
                //   window.g.BaseURL +
                //   "FileServer/api/Preview?token=" +
                //   window.localStorage.getItem("token") +
                //   "&" +
                //   "fileGuid=" +
                //   encodeURIComponent(element.ROW_GUID);
                // this.fileList.push(element);
              }
            // });
          });
        }
      },
      //获取附件文件流
    getFileUrl: async function (element) {
      let formData = new FormData();
      formData.append("accessCode", "98bcf528966e48ce896a8b3fd02d45d5");
      formData.append(
        "cityCode",
        window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000"
      );
      formData.append(
        "paramStr",
        JSON.stringify({
          fileGuid: element.ROW_GUID,
        })
      );
      let response = await dataTransFilePreview(formData);
      if (response) {
        var img = new Blob([new Int8Array(response.data, 0)], {
          type: response.headers["content-type"],
        }); //type类型可自定义
        element["isImage"] = true;
        element["url"] = window.URL.createObjectURL(img);
        this.fileList.push(element);
      }
    },
    },
    mounted(){
      // 是否腾空
      this.getEnum('86d6eb80-8bcb-49f6-b5c3-462ac1ae585d')
      // 解危方式
      this.getEnum('92f63613-9186-4a84-ba66-d098614e07a6')
      // 鉴定类型
      this.getEnum('b15c9597-ccb8-435c-b43d-06fe30fc0e08')
      // 鉴定等级
      this.getEnum('c7007467-d12c-4b87-948e-aa58b2df2131')
      this.rowData = JSON.parse(this.$route.query.data)
      this.showData = this.$route.query.type
      this.getData()
      this.getFile()
      dd.ready(function () {
        dd.setTitle({
          title: '危改审批'
        })
          .then(res => {
          })
          .catch(err => {
            console.error(err)
          })
      })
    }
  };
</script>

<style scoped lang="scss">
#decrepitHouseYB{
  height: 100vh;
  overflow-y: auto;
  background: #f6f6f6;
  .top {
    height: 90px;
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 25px;
    text-align: center;
    .origin {
      width: 22px;
      height: 22px;
      background: #007aff;
      border-radius: 50%;
      display: inline-block;
    }
    .line {
      width: 20vw;
      border: 1px dashed #007aff;
      display: inline-block;
    }
  }
  .inputWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #d2d2d2;
  }
  .content {
    width: 100%;
    height: auto;
    background: #ffffff;
    padding: 10px;
    .line {
      width: 6px;
      height: 26px;
      background: #007aff;
      display: inline-block;
    }
    .list ul li {
      min-height: 40px;
      line-height: 40px;
    }
  }
  .list ul li {
    min-height: 40px;
    line-height: 40px;
  }
  .footer {
    background: #fff;
    padding: 0 10px 20px 10px;
    text-align: center;
    p {
      color: #000;
      font-size: 14px;
      line-height: 40px;
    }
    .bottomBtn {
      height: 50px;
      background: #007aff;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      font-weight: bold;
    }
  }
}
</style>
